<!--
@author [刘一笔 Sam]
@email [awesome_sam@qq.com]
@create date 2019-10-19 21:47:04
@modify date 2019-10-19 21:47:04
@desc [百分比实现网格系统]
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>百分比网格系统</title>
    <style>
      body {
        width: 90%;
        max-width: 980px;
        margin: 0 auto;
      }
      .wrapper {
        padding-right: 2.08333333%;
      }
      .col {
        float: left;
        margin-left: 2.08333333%;
        width: 6.25%;
        background: rgb(255, 150, 150);
      }
      /* Two column widths (12.5%) plus one gutter width (2.08333333%) */
      .col.span2 {
        width: 14.58333333%;
      }
      /* Three column widths (18.75%) plus two gutter widths (4.1666666) */
      .col.span3 {
        width: 22.91666666%;
      }
      /* And so on... */
      .col.span4 {
        width: 31.24999999%;
      }
      .col.span5 {
        width: 39.58333332%;
      }
      .col.span6 {
        width: 47.91666665%;
      }
      .col.span7 {
        width: 56.24999998%;
      }
      .col.span8 {
        width: 64.58333331%;
      }
      .col.span9 {
        width: 72.91666664%;
      }
      .col.span10 {
        width: 81.24999997%;
      }
      .col.span11 {
        width: 89.5833333%;
      }
      .col.span12 {
        width: 97.91666663%;
      }
      .offset-by-one {
        margin-left: 10.41666666%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
        <div class="col">9</div>
        <div class="col">10</div>
        <div class="col offset-by-one">12</div>
      </div>
      <div class="row">
        <div class="col span3">3</div>
        <div class="col span5">5</div>
        <div class="col span4">4</div>
      </div>
    </div>
  </body>
</html>
